<template>
  <div>
    <el-container>
      <!-- 顶部 -->
      <el-header class="header-layout">
        <div class="header-container">
          <div class="header-wrap">
            <el-image class="logo" src="/logo.png"></el-image>
            <el-menu class="menu"
                     router
                     :default-active="activeMenuItem"
                     mode="horizontal"
                     background-color="#ffffff"
                     text-color="#2c3e50"
                     active-text-color="#44B549">
              <el-menu-item :index="item.url"
                            v-for="item in categoryList" :key="item.url">
                <span v-text="item.name"></span>
              </el-menu-item>
              <el-menu-item index="/baike">
                <span>百科</span>
              </el-menu-item>
              <el-menu-item index="/mall">
                <span>商城</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main class="main-layout">
        <router-view/>
      </el-main>
      <!-- 底部 -->
      <el-footer class="footer-layout">
        <div class="footer-container">
          <div class="footer-wrap">
            <div class="copyright" v-html="copyright"></div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenuItem: this.$router.currentRoute.path,
      categoryList: [],
      copyright: ''
    }
  },
  methods: {
    loadCategoryList() {
      let categoryList = [
        {id: 1, name: '推荐', url: '/tuijian'},
        {id: 2, name: '经验', url: '/jingyan'},
        {id: 3, name: '功效', url: '/gongxiao'},
        {id: 4, name: '冲泡', url: '/chongpao'},
        {id: 5, name: '存放', url: '/cunfang'},
        {id: 6, name: '禁忌', url: '/jinji'},
        {id: 7, name: '茶器', url: '/chaqi'},
        {id: 8, name: '文化', url: '/wenhua'},
        {id: 9, name: '花茶', url: '/huacha'}
      ];
      this.categoryList = categoryList;
    },
    loadCopyright() {
      let copyright = '<p>版权所有：达内时代科技集团, IT学院, Java教学研发部</p>' +
          '<p>备案号：京ICP备17010360号（模拟数据）' +
          '<img style="position: relative; top: 5px; margin-left: 20px; margin-right: 5px;" ' +
          'src=""/>' +
          '京公网安备 110111010110号（模拟数据）</p>' +
          '<p><span>联系邮箱：java@tedu.cn</span>' +
          '<span style="margin-left: 30px;">公众号：达内教育</span></p>' +
          '<p>建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站</p>';
      this.copyright = copyright;
    },
    checkActiveMenuItem() {
      if (this.$store.state.articleCategoryLink) {
        this.activeMenuItem = this.$store.state.articleCategoryLink;
      }
    }
  },
  created() {
    this.loadCategoryList();
    this.loadCopyright();
  },
  mounted() {
    this.checkActiveMenuItem();
  }
}
</script>

<style>
.header-layout {
  height: 100px !important;
  background: #fff;
  text-align: center;
  padding: 0;
}

.header-wrap {
  width: 1200px;
  margin: 30px auto 0 auto;
}

.header-wrap .logo {
  width: 160px;
  height: 50px;
  float: left;
}

.header-wrap .menu {
  margin-left: 200px;
}

.main-layout {
  text-align: center;
  padding: 0 !important;
}

.main-container {
  margin-top: 20px;
}

.main-wrap {
  width: 1200px;
  margin: 0 auto;
}

.main-wrap .nav-breadcrumb {
  margin-bottom: 20px;
}

.footer-layout {
  text-align: center;
}

.footer-wrap {
  width: 1200px;
  margin: 20px auto 0 auto;
  padding: 10px 0 30px 0;
  border-top: 2px solid #44B549 !important;
}

.footer-wrap .copyright {
  color: dimgray;
  font-size: 13px;
}

.footer-wrap .copyright p {
  line-height: 30px;
}

.float-link-container {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.left-aside-container {
  width: 880px;
  float: left;
}

.left-aside-wrap {

}

.left-aside-wrap .article-list {
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}

.right-aside-container {
  width: 300px;
  text-align: left;
  float: right;
}

.right-aside-wrap {

}

.article-list-item {

}

.article-list-item .left {

}

.article-list-item .left .image {
  width: 220px;
  height: 150px;
  border-radius: 5px;
  float: left;
}

.article-list-item .right {
  margin-left: 240px;
  text-align: left;
}

.article-list-item .right .title {
  padding: 6px 0;
  font-size: 20px;
}

.article-list-item .right .title a {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #000;
}

.article-list-item .right .title a:hover {
  color: #44B549;
}

.article-list-item .right .content {
  margin: 25px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  color: #333;
}

.article-list-item .right .tag {
  font-size: 13px;
  font-style: normal;
  color: #999;
  margin-right: 3px;
}

.article-list-item .right .up {
  font-size: 13px;
  font-style: normal;
  color: #999;
  margin-right: 20px;
}

.article-list-item .right .down {
  font-size: 13px;
  font-style: normal;
  color: #999;
  margin-right: 20px;
}

.article-list-item .right .date {
  font-size: 13px;
  font-style: normal;
  color: #999;
}

.btn-load-more {
  width: 200px;
}

.el-menu--horizontal {
  border: none !important;
}

.el-menu-item {
  font-size: 20px !important;
}

.el-menu-item.is-active {
  background: transparent !important;
  border-bottom: 2px solid #44B549 !important;
}


.el-menu-item:hover {
  color: #44B549 !important;
  background: transparent !important;
}
</style>